<template>
	<view class="container">
		<view class="banner">
			<!-- <image src="../../static/images/index/0.jpg" style="width: 100vw;" mode="widthFix"></image> -->
			<u-swiper class="bg" height="600" :list="listAds" mode="dot" indicator-pos="bottomCenter"></u-swiper>
			<view class="intro">
				<view class="greet">您好，{{ isLogin ? member.username : '游客' }}</view>
				<!-- <view class="note">一杯奶茶，一口软欧包，在奈雪遇见两种美好</view> -->
			</view>
		</view>
		<view class="content">
			<view class="entrance">
				<view class="item" @tap="takein">
					<image src="../../static/images/index/11.jpg" class="icon-arrow"></image>
					<view class="title">门店自取</view>
					<view class="f12">Pick up</view>
					<image src="../../static/images/index/1.jpg" style="width:126rpx; height: 128rpx; margin-left: 124rpx; margin-top: -22rpx;"></image>
				</view>
				<view class="item" @tap="takeout">
					<image src="../../static/images/index/11.jpg" class="icon-arrow"></image>
					<view class="title">外卖到家</view>
					<view class="f12">Delivery</view>
					<image src="../../static/images/index/2.jpg" style="width:132rpx; height: 112rpx; margin-left: 110rpx; margin-top: -6rpx;"></image>
				</view>
				<view class="item" @tap="takein">
					<image src="../../static/images/index/11.jpg" class="icon-arrow"></image>
					<view class="title">生日蛋糕</view>
					<view class="f12">Cake</view>
					<image src="../../static/images/index/3.jpg" style="width:134rpx; height: 136rpx; margin-left: 120rpx; margin-top: -22rpx;"></image>
				</view>
				<view class="item" @tap="takeout">
					<image src="../../static/images/index/11.jpg" class="icon-arrow"></image>
					<view class="title">甜品台茶歇</view>
					<view class="f12">Dessert</view>
					<image src="../../static/images/index/4.jpg" style="width:132rpx; height: 112rpx; margin-left: 120rpx;"></image>
				</view>
			</view>
			<view style="margin-top: 40rpx;">
				<image src="../../static/images/index/5.jpg" style="display: block; margin: 0 auto 18rpx;width: 80rpx; height: 78rpx;"></image>
				<view style="text-align: center; font-size: 34rpx; font-weight: 600; color: #510e00;">Member Center</view>
			</view>
			<view class="user" v-if="!isLogin">
				<view class="user-cont" @tap="memberCode">
					<view class="user-info f30 fb">VIP <text class="f12">*欢迎加入店铺会员 Enjoy more VIP offers</text></view>
					<view class="zc f30 fb">注册会员 +</view>
					<view style="margin-top: 4rpx; font-size: 22rpx;">领取店铺会员卡，享受更多店铺权益</view>
					<view class="click-in">Click in ></view>
				</view>
			</view>
			<view class="sc-box">
				<view class="item" @tap="balance">
					<view class="f30 fb">
						充值中心
					</view>
					<view class="f12">
						(充值享好礼)
					</view>
					<view class="click-in">Click in ></view>
				</view>
				<view class="item" @click="goShopping">
					<view class="f30 fb">
						积分商城
					</view>
					<view class="f12">
						(积分换福利)
					</view>
					<view class="click-in">Click in ></view>
				</view>
			</view>
			<view class="tips-item" style="margin-top: 40rpx;">
				<image style="width: 62rpx; height: 74rpx;" src="../../static/images/index/6.jpg"></image>
				<view class="tips-cont">
					<view class="f12">CAKE ORDERING INSTRUCTIONS</view>
					<view class="f30">蛋糕订购须知</view>
				</view>
				<view class="click-in">Click in ></view>
			</view>
			<view class="tips-item">
				<image style="width: 68rpx; height: 70rpx;" src="../../static/images/index/7.jpg"></image>
				<view class="tips-cont">
					<view class="f12">CAKE ORDERING INSTRUCTIONS</view>
					<view class="f30">面包存放须知</view>
				</view>
				<view class="click-in">Click in ></view>
			</view>
			<view class="tips-item">
				<image style="width: 68rpx; height: 66rpx;" src="../../static/images/index/8.jpg"></image>
				<view class="tips-cont">
					<view class="f12">CAKE ORDERING INSTRUCTIONS</view>
					<view class="f30">配送服务须知</view>
				</view>
				<view class="click-in">Click in ></view>
			</view>
			<view class="part-1">
				<text class="part-text">100%无添加剂</text><text class="icon-dot"></text>
				<text class="part-text">100%纯手工制作</text><text class="icon-dot"></text>
				<text class="part-text">100%素食原料</text>
			</view>
			<view class="h1">素奢烘焙坊，玫莎拙不凡</view>
			<view class="kf">
				<view>
					<view class="f30">添加客服</view>
					<view class="f12">长按二维码添加客服 ></view>
				</view>
				<image src="../../static/images/index/12.jpg" style="width: 150rpx; height: 150rpx;"></image>
			</view>
			<image src="../../static/images/index/9.jpg" style="display: block; width: 238rpx; height: 105rpx; margin: 68rpx auto;"></image>
			<image src="../../static/images/index/13.jpg" style="display: block; width: 606rpx; height: 38rpx; margin: 0 auto;"></image>
			<!-- <view>BRAND INTRODUCTION</view> -->
			<view style="margin-top: 12rpx; margin-bottom: 40rpx; text-align: center;">—— ——品牌介绍 —— ——</view>
			<view style="color: #4f1300;">
				<view class="lh2">《道德经》云，见素抱朴，少私寡欲。</view>
				<view class="lh2">食素味，1
				食之以素，
				静之以心，
				素味，
				是最贴近生命本真
				的方式。</view>
				<view class="lh2">它不仅是自然植物供给人体细胞的能量，也是唤醒心灵爱
				的力量。</view>
				<view class="lh2">丰富的素味食谱，在东方饮食文明的融合下，深刻影响着
				人类的味蕾记忆。在华夏大地上，诞生出一个独特融合东
				西方健康饮食文化的素味烘焙，更加符合现代生活追求自
				然品质的另一种选择。由此创始团队发起-玫莎素味烘焙
				坊，向社会注入一股烘焙类清流。</view>
				<view class="lh2">依托国内外特色优质原料，以国家卫健委2023年10月批
				准的油沙豆新资源食品为主要烘焙原料，玫莎力求构架东
				方素味烘焙体系，采用匠心融合的制作工艺，用尽可能贴
				近自然与坦率的方式，烘焙出非凡的素味产品。</view>
				<view class="lh2">玫莎提倡在补充人体需求多重营养元素的同时，让身体得
				到净化与释放，影响再塑国人健康饮食之结构，寻生命之
				源泉。让触达到玫莎素味烘焙的大众，感受素味烘焙带来
				的全新生命力;让参与素味烘焙事业的精英，有广阔的事
				业舞台，追逐美好生活，让家庭更和谐，让生命更精彩!
				品玫莎烘焙之素味，感受美
				让穿行在人间烟火中的大众，
				妙之生活，展现生命之魅力!</view>
				<view class="lh2">玫，一如善男善女爱河之证;莎，取自远古非洲沙漠神秘
				果实油莎豆之名。玫莎组合象征着志同道合，真爱无敌
				坚如磐石，亘古不变。</view>
				<view class="lh2">天地共生，万物归一。人活到极致，是素与简;食物做到
				极致，是简与素。</view>
			</view>
			<view style="background: #f8b51c; margin: 40rpx -28rpx 0; overflow: hidden; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx">
				<view style="border-radius: 20rpx;width: 750rpx;height: 564rpx; margin-left: 4rpx; overflow: hidden;">
					<image src="../../static/images/index/14.jpg" style="width: 750rpx; height: 564rpx;"></image>
				</view>
				<view v-if="!isLogin" class="login-cont" @tap="memberCode">
					<view>
						<view class="f30 fb" style="color: #4f1200;">
							Hello
						</view>
						<view class="f12">欢迎加入玫莎俱乐部，开启甜蜜之旅……</view>
					</view>
					<text class="login-btn">注册/登录</text>
				</view>
				<view class="f12" style="margin: 48rpx 0; text-align: center; color: #4f1200;">健康&时尚|品质&高级|匠心&融合|天然&回归|乐享&幸福</view>
			</view>
			<!-- <view class="info">
				<view class="integral_section" @tap="integrals">
					<view class="top">
						<text class="title">我的积分</text>
						<text class="value">{{member.score}}</text>
					</view>
					<view class="bottom">
						可兑换优惠券和积分商品
						<view class="iconfont iconarrow-right"></view>
					</view>
				</view>
				<view class="qrcode_section" @tap="memberCode">
					<image src="/static/images/mine/hym.png"></image>
					<text>会员码</text>
				</view>
			</view> -->
			
			<!-- <view class="navigators">
				<view class="left">
					<view class="grid flex-column just-content-center" @click="goShopping">
						<view class="align-items-center">
							<view class="iconfont-unidrink icon-shop" ></view>
							<view class="font-size-sm text-color-base">积分商城</view>
						</view>	
						<view class="text-color-assist">进入积分商城兑好物</view>
					</view>
					
				</view>
				<view class="right">
					<view class="tea-activity" @tap="integrals">
						<view>更多积分</view>
					</view>
					<view class="member-gifts" @tap="coupons">
						<view>会员劵包</view>
					</view>
				</view>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				listAds: []
			}
		},
		computed: {
			...mapState(['member', 'address', 'store']),
			...mapGetters(['isLogin'])
		},
		onShow() {
			this.getAds();
		},
		onShareAppMessage(e) {
			return {
				title: '玫莎素味烘焙'
			};
		},
		methods: { 
			async getAds () {
				let shop_id = this.store.id ? this.store.id : 0;
				let data = await this.$u.api.menuAds({
					shop_id: shop_id
				});
				if (data) {
					this.listAds = [];
					this.listAds = data;
				}
			},
			takein() {
				this.$store.commit('SET_ORDER_TYPE', 'takein')
				uni.switchTab({
					url: '/pages/menu/menu'
				})
			},
			takeout() {
				this.$store.commit('SET_ORDER_TYPE', 'takeout')
				uni.switchTab({
					url: '/pages/menu/menu'
				}) 
			},
			integrals() {
				if(!this.isLogin) {
					uni.navigateTo({url: '/pages/components/pages/login/login'})
					return
				}
				uni.navigateTo({
					url: '/pages/components/pages/integrals/integrals'
				})
			},
			goShopping() {
				uni.navigateTo({
					url: '/pages/components/pages/scoreproduct/list'
				})
			},
			balance() {
				if(!this.isLogin) {
					uni.navigateTo({url: '/pages/components/pages/login/login'})
					return
				}
				uni.navigateTo({
					url: '/pages/components/pages/balance/balance'
				})
			},
			coupons() { 
				if(!this.isLogin) {
					uni.navigateTo({url: '/pages/components/pages/login/login'})
					return
				}
				uni.navigateTo({
					url: '/pages/components/pages/coupons/coupons'
				})
			},
			memberCode() {
				if(!this.isLogin) {
					uni.navigateTo({url: '/pages/components/pages/login/login'})
					return
				}
				uni.navigateTo({
					url: '/pages/components/pages/mine/member-code'
				})
			},
			invite() {
				uni.navigateTo({
					url: '/pages/components/pages/activities/invite'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
page {
	height: auto;
	min-height: 100%;
}
/* #endif */
page {
	background-color: #fef7e5!important;
}
.banner {
	position: relative;
	width: 100%;
	height: 600rpx;
	
	.bg {
		width: 100%;
		height: 600rpx;
	}
	
	.intro {
		position: absolute;
		top: calc(50rpx + var(--status-bar-height));
		left: 40rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		
		.greet {
			font-size: $font-size-lg;
			margin-bottom: 10rpx;
		}
		
		.note {
			font-size: $font-size-sm;
		}
	}
}

.content {
	padding: 0 26rpx;
}

.entrance {
	position: relative;
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
	.item {
		width: 344rpx;
		height: 278rpx;
		padding: 60rpx 22rpx 50rpx 30rpx;
		position: relative;
		background-color: #ffb219;
		color: #fff;
		margin-bottom: 12rpx;
		&:nth-child(2n + 2){
			margin-left: 10rpx;
		}
		.icon-arrow{
			position: absolute;
			right: 22rpx;
			top: 66rpx;
			width: 28rpx;
			height: 28rpx;
		}
		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #fff;
		}
	}
}
.user{
	position: relative;
	margin-top: 40rpx;
	background: #ffb219;
	padding: 28rpx 45rpx;
	color: #fff;
	.user-info{
		line-height: 44rpx;
		font-style: italic;
		border-bottom: 2rpx solid #fff;
		.f12{
			margin-left: 12rpx;
		}
	}
	.zc{
		margin-top: 4rpx;
		padding-top: 10rpx;
		border-top: 1px solid #ff9d1e;
	}
}
.f12{
	font-size: 20rpx;
	color: #fff;
}
.f28{
	font-size: 28rpx;
}
.f30{
	font-size: 30rpx;
}
.fb{
	font-weight: 600;
}
.click-in{
	position: absolute;
	right: 42rpx;
	bottom: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 30rpx;
	background-color: #580a03;
	color: #fff;
	font-size: 20rpx;
}
.sc-box{
	display: flex;
	margin-top: 16rpx;
	.item{
		position: relative;
		width: 346rpx;
		height: 198rpx;
		padding: 38rpx 46rpx;
		box-sizing: border-box;
		background-color: #ffd281;
		.f30, .f12{
			color: #390e00;
		}
		&:nth-child(1){
			margin-right: 10rpx;
		}
	}
}
.tips-item{
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 26rpx;
	padding: 36rpx 40rpx;
	background-color: #ffd27f;
	.tips-cont{
		margin-left: 36rpx;
		color: #480902;
		.f12{
			margin-bottom: 4rpx;
			color: #480902;
		}
	}
	.click-in{
		bottom: 56rpx;
	}
}
.part-1{
	margin-top: 66rpx;
	margin-bottom: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.part-text{
		font-size: 20rpx;
		color: #6e200a;
		width: 204rpx;
		height: 36rpx;
		line-height: 34rpx;
		border: 2rpx solid #6e200a;
		text-align: center;
		border-radius: 4rpx;
	}
	.icon-dot{
		width: 6rpx;
		height: 6rpx;
		margin: 0 14rpx;
		background-color: #feb30a;
	}
}
.h1{
	font-size: 32rpx;
	color: #560501;
	text-align: center;
	font-weight: bold;
}
.lh2{
	margin-top: 30rpx;
}
.login-cont{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 144rpx;
	padding: 0 24rpx;
	margin: 0 28rpx;
	background: #fff;
	border-radius: 20rpx;
	color: #560501;
	overflow: hidden;
	margin-top: -48rpx;
	.f12{
		margin-top: 4rpx;
		color: #560501;
	}
	.login-btn{
		width: 154rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #fff;
		text-align: center;
		background: #ff6043;
		border-radius: 28rpx;
		font-size: 24rpx;
	}
}
.kf{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 48rpx -28rpx 0;
	border-top: 20rpx solid #ffb518;
	background-color: #ffd27f;
	padding: 34rpx 78rpx;
	color: #560501;
	.f12{
		margin-top: 20rpx;
		color: #560501;
	}
}
.info {
	position: relative;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.integral_section {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.top {
			display: flex;
			align-items: center;
			
			.title {
				color: $text-color-base;
				font-size: $font-size-base;
				margin-right: 10rpx;
			}
			.value {
				font-size: 44rpx;
				font-weight: bold;
			}
		}
		
		.bottom {
			font-size: $font-size-sm;
			color: $text-color-assist;
			display: flex;
			align-items: center;
		}
	}
	
	.qrcode_section {
		color: $color-primary;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-size-sm;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
		}
	}
}

.navigators {
	width: 100%;
	margin-bottom: 20rpx;	
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 20rpx;
	display: flex;
	align-items: stretch;
	border-radius: 300rpx;
	.left {
		width: 340rpx;
		margin-right: 20rpx;
		display: flex;
		padding: 0 20rpx;
		
		font-size: $font-size-sm;
		color: $text-color-base;
		background-color: #F1F8FA;
		border-radius: 200rpx;
		text-align: center;;
		
		.grid {
			height: 100%;
			width: 100%;
			display: flex;
		}
		.icon-shop {
			font-size: 100rpx;
			color: #00b1b7;
		}
	}
	
	.right {
		width: 290rpx;
		//display: flex;
		flex-direction: column;
		
		.tea-activity, .member-gifts {
			width: 100%;
			display: flex;
			padding: 20rpx;
			font-size: $font-size-sm;
			color: $text-color-base;
			align-items: center;
			position: relative;
			border-radius: 100rpx;
			height: 150rpx;
			text-align: center;
			view {
				display: block;
				width: 100%;
			}
			padding-right: 60rpx;
		}
		
		.tea-activity {
			//background-color: #FDF3F2;
			margin-bottom: 20rpx;
			
		}
		
		.member-gifts {
			//background-color: #FCF6D4;
		}
		
		.right-img {
			flex: 1;
			position: relative;
			margin-left: 20rpx;
			margin-right: -20rpx;
			margin-bottom: -20rpx;
			display: flex;
			align-items: flex-end;
			
			image {
				width: 100%;
			}
		}
	}
	
	.mark-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	
	.yzclh-img {
		height: 122.96rpx;
		width: calc(173 / 99 * 122.96rpx);
	}
}

.member-news {
	width: 100%;
	margin-bottom: 30rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		
		.title {
			font-size: $font-size-lg;
			font-weight: bold;
		}
		
		.iconfont {
			font-size: 52rpx;
			color: $text-color-assist;
		}
	}
	
	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.item {
			width: 100%;
			height: 240rpx;
			position: relative;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			
			.title {
				position: relative;
				font-size: 32rpx;
				font-weight: 500;
				width: 100%;
				top: -70rpx;
				left: 16rpx;
				color: #ffffff;
			}
		}
	}
}
</style>
